<script setup lang="ts">
import type {PropType} from "vue";
import {LoadFunction, TableColumn} from "@/components/ATable/types";
import {useElTableDialog} from "@/components/ATableSelect/f";

const props = defineProps({
  columns:{
    type:Object as PropType<TableColumn[]>,
    required:true ,
  },
  height:{
    type:[Number,String],
    default: '50vh'
  },
  query:Object as any,
  loadFunction:{
    type:Function as PropType<LoadFunction>,
    required:true,
  },
  selectType:{
    type:String as PropType<'checkbox'|'radio'>,
    default:'checkbox'
  },
  tableSlot:Object as PropType<Record<string, unknown>>,
  formart:{
    type:Function as PropType<(data:any|any[])=>string>,
    default:(data:any|any[])=>{
      return '已选择'
    }
  },
  modelValue:{
    type:[Number,String,Object,Array],
    required:false,
  },
  transferSelected:{
    type:Function as PropType<(data:any|any[])=>any>,
    required:false,
  },
});
const Dialog = useElTableDialog(
  props.loadFunction,
  props.columns,
  props.height,
  props.query,
  false,
  props.selectType,
  props.tableSlot,
);
const openSelector=()=>{
  Dialog.ref.value?.open(currentData.value)
  nextTick(()=>{
    const table = Dialog.ref.value?.getTable();
    table?.value?.reload()
  })
}
const emits = defineEmits<{
  (e:"selected",data:any|any[]):void,
  (e:'update:modelValue',data:any|any[])
}>();
const currentData=ref<any|any[]>()
const onSelected=(data:any|any[])=>{
  emits('selected',data)
  let d=data
  if (props.transferSelected){
    d=props.transferSelected(d)
  }
  emits('update:modelValue',d)
  currentData.value=data
}
const d=computed(()=>{
  if (currentData.value){
    return props.formart(currentData.value)
  }
  return undefined
})
</script>

<template>
  <el-input :model-value="d" disabled>
    <template #suffix>
      <el-button text  type="primary" @click="openSelector">选择</el-button>
    </template>
  </el-input>
  <Dialog.DOM @selected="onSelected"/>
</template>

<style scoped lang="scss">

</style>
